<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { setLocale } from '@/i18n'
const { t } = useI18n()

const changeLanguage = (locale: 'zh-CN' | 'en') => {
  setLocale(locale);
};
</script>

<template>
  <div id="app">
    <div class="body">
      <div>{{ t("app.china") }}</div>
      <div>{{ t("app.meiGuo") }}</div>
      <div>{{ t("app.riBen") }}</div>
      <div>{{ t("app.faGuo") }}</div>
    </div>
    <div class="footer">
      <button @click="changeLanguage('zh-CN')">中文</button>
      <button @click="changeLanguage('en')">英文</button>
    </div>
  </div>
</template>

<style scoped>
.body {
  padding: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.footer {
  text-align: center;
}
</style>
